<script setup>
import {
  Menu as IconMenu,
  Document,
} from '@element-plus/icons-vue'

import {shallowRef,reactive,ref} from 'vue'



const menus = shallowRef([
    {name:'用户列表',url:'/userlist',icon:IconMenu},
    {name:'订单列表',url:'/orderlist',icon:Document},
])

//引用父组件中的值
const props = defineProps({
    isCollapse:Boolean
})

</script>

<template>
    <div>
        <el-aside :width="props.isCollapse?'62px':'200px'" class="aside">
 
            <el-menu default-active="/userlist"
                class="el-menu-vertical-demo"
                router   :collapse="isCollapse" 
            >
                <el-menu-item :index="menu.url" v-for="menu in menus" :key="menu.name"
                   
                >
                    <el-icon>
                        <component :is="menu.icon"></component>
                    </el-icon>
                    <span>{{menu.name}}</span>
                </el-menu-item> 
            </el-menu>
        </el-aside>
    </div>
</template>